<template>
    <a-input-search v-model:value="value" placeholder="input search text" enter-button="Search" size="large"
        @search="onSearch" />
    <a-table :columns="columns" :data-source="data">
        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
                <a @click="del(record.id)">Delete</a>
            </template>
        </template>
    </a-table>
</template>
<script lang="ts" setup>
import type { TableProps } from 'ant-design-vue';
import { onMounted, reactive, ref } from 'vue';
import { getUserList, getOneByid, deleteUser } from '@/apis/user';
const value = ref<string>('');
const data = ref<any>([]);
const del = async (id: number) => {
    console.log(id);
    await deleteUser(id);
    await initData()
}
const onSearch = (searchValue: string) => {
    console.log('use value', searchValue);
    console.log('or use this.value', value.value);
    getOneByid(Number(searchValue)).then(res => {
        data.value = [res.data]
    })
};

const columns: TableProps['columns'] = [
    {
        title: 'id',
        dataIndex: 'id',
    },
    {
        title: 'username',
        dataIndex: 'username',
    },
    {
        title: 'password',
        dataIndex: 'password',
        width: '30%',
    },
    {
        title: 'Sex',
        dataIndex: 'sex',
    },
    { title: 'Action', key: 'action' },
];

const initData = async () => {
    await getUserList().then((response) => {
        console.log('用户列表：', response.data);
        data.value = response.data
    });
}
onMounted(async () => {
    await initData()
});

</script>